@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';

.wrapper {
  display: flex;
  gap: $dimension-1m;
  align-items: center;
  justify-content: center;

  width: max-content;
  margin-bottom: $dimension-2m;
  padding: $dimension-3m;

  background-color: $sys-neutral-background1-level;
  border: 1px solid $sys-neutral-decor-default;
  border-radius: $dimension-050m;
}

$border-width: 0.5px;

.table {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  background-color: $sys-neutral-background1-level;
  border: $border-width solid $sys-neutral-decor-default;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: $dimension-1m;

  border: $border-width solid $sys-neutral-decor-disabled;
}

.headerCell {
  min-width: $dimension-6m;
  text-transform: uppercase;
}

.toastContainer {
  @include composite-var($toaster-system-event-toaster-container);

  box-sizing: border-box;
}

.systemEvent {
  flex: 1;

  >[role=progressbar]{
    width: 50%;
    animation: none;
  }
}